<template>
    <div class="start">
        <Title :msg="msg" />
        <ContextBox v-for="(item, index) in list" :key="index" :title="item['title']" :destList="item['destList']">
        </ContextBox>
        <el-button type="primary" @click="prevHandler" class="  prev-btn">返回</el-button>
        <el-button type="primary" @click="nextHandler" class="next-btn">下一页</el-button>
    </div>
</template>

<script setup lang='ts'>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import Title from '@/components/Title.vue'
import ContextBox from '@/components/ContextBox.vue'

const router = useRouter()
const msg = ref<string>('目录结构')
const list = ref<Array<{
    title: string,
    destList: Array<string>
}>>([{
    title: 'public - 前端公共文件包，与其他工程无异',
    destList: [
        '',
    ]
}, {
    title: 'src - 存放前端代码',
    destList: [
        '前端开发都很熟悉，这里就不多介绍了。',
    ]
}, {
    title: 'src-tauri - 存放tauri/rust源代码',
    destList: [
        '1. icons 后端资源目录',
        '2. src 后端代码目录',
        '3. target 产物目录',
        '4. build Tauri打包执行的文件',
        '5. Cargo.lock 类似于 pnpm-lock',
        '6. Cargo.toml 类似于 package.json',
        '7. tauri.conf.json 类似于 vite.config.ts 主要用于运行和打包的一些配置',
    ]
}])

const nextHandler = () => {
    router.push({ path: '/event' })
}
const prevHandler = () => {
    router.go(-1)
}

</script>
<style lang='less' scoped>
.start {
    width: 100%;
    height: 100vh;
    background: #fff;
    overflow: hidden;

    .next-btn {
        position: fixed;
        bottom: 20px;
        right: 20px;
    }

    .prev-btn {
        position: fixed;
        top: 20px;
        left: 20px;
    }

    .link-open-window {
        margin-left: 5%;
        font-size: 20px;
        font-weight: 600;
        color: #15bb09;
        cursor: pointer;
        text-decoration: underline;
    }
}
</style>